<template>
  <view class="result-container">
    <view class="result-wrapper">
      <view class="wrapper-score">{{ props.result.score }}</view>
      <view class="wrapper-row">
        <view class="col-content">
          <rich-text class="col-rich" :nodes="studyTimeNode"></rich-text>
          <text class="col-label">学习时长</text>
        </view>
        <view class="col-content">
          <text class="col-value">
            <text class="value">{{ props.result.study_num }}</text>
            <text class="desc">次</text>
          </text>
          <text class="col-label">练习次数</text>
        </view>
        <view class="col-content">
          <text class="col-value">
            <text class="value">{{ props.result.days }}</text>
            <text class="desc">天</text>
          </text>
          <text class="col-label">坚持天数</text>
        </view>
      </view>
      <view class="tag"></view>
    </view>

    <view class="result-title">习题回顾</view>

    <view class="result-overview" v-for="part in props.result.skillData" :key="part.part_id">
      <view class="overview-title">
        <view class="title" v-if="part.symbol">
          {{ part.symbol }}
        </view>
      </view>

      <image class="overview-pink-icon" src="https://rwstatic.tentons.cn/web/Lesson/images/pink-stripe-icon.png" />
      <view class="overall-wrapper">
        <view class="wrapper-table">
          <view class="table-header">
            <text class="header">句序</text>
            <text class="header">得分</text>
            <text class="header">录音</text>
            <text class="header">详情</text>
          </view>

          <view class="table-row" v-for="(item, index) in part.practiceList" :key="item.record_id">
            <view class="col">
              <view class="index">{{ index + 1 }}</view>
            </view>
            <view class="col">
              <text class="score">{{ item.score }}</text>
            </view>
            <view class="col">
              <loudspeaker class="speaker" :voice="item.user_voice" />
            </view>
            <view class="col">
              <image class="detail" @click="handleToDetail(item)"
                src="https://rwstatic.tentons.cn/web/Lesson/images/detail.png" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="result-line"></view>

    <button class="result-operate" @click="handleOperate">
      <template v-if="props.isReStart">
        退出
      </template>
      <template v-else>
        <template v-if="props.isRelearn">
          重新开始
        </template>
        <template v-if="!props.isRelearn">
          Lesson2
          <image class="video-button-right" src="https://rwstatic.tentons.cn/web/Lesson/images/button-right-icon.png" />
        </template>
      </template>
    </button>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import type { IPracticeList, ISkillResult } from "./index";
import loudspeaker from "@/components/loudspeaker.vue";
import { util } from "@/utils/util";
import { useStore } from "vuex";

interface IProps {
  result: ISkillResult;
  isRelearn: boolean;
  isReStart: boolean;
  session_id: string;
  headerTitle: string;
}

const store = useStore();
const emits = defineEmits<{
  (e: "reStart", payload?: any): void;
}>();

const props = defineProps<IProps>();

const studyTimeNode = ref<any[]>([]);

const handleSetTimeLong = (time: number) => {
  const hours = Math.floor(time / 3600);
  const minutes = Math.ceil((time % 3600) / 60);

  let childrenNodes: any[] = [];

  if (hours) {
    childrenNodes.push(
      {
        name: "span",
        attrs: {
          class: "rich-text_skill-value",
        },
        children: [
          {
            type: "text",
            text: hours.toString(),
          },
        ],
      },
      {
        name: "span",
        attrs: {
          class: "rich-text_skill-label",
        },
        children: [
          {
            type: "text",
            text: " h",
          },
        ],
      }
    )
  }

  childrenNodes.push(
    {
      name: "span",
      attrs: {
        class: "rich-text_skill-value",
      },
      children: [
        {
          type: "text",
          text: minutes.toString(),
        },
      ],
    },
    {
      name: "span",
      attrs: {
        class: "rich-text_skill-label",
      },
      children: [
        {
          type: "text",
          text: " min",
        },
      ],
    }
  )

  studyTimeNode.value = [
    {
      name: "div",
      children: childrenNodes,
    },
  ];
}

const handleToDetail = (item: IPracticeList) => {
  let tempObj = {};
  const temp = uni.getStorageSync(`${item.record_id}`);

  if (temp) {
    tempObj = JSON.parse(temp);
  }
  const tempData = Object.assign(item, tempObj);

  uni.navigateTo({
    url: `/pages/lowPricedCourse/soundExplanation/skillPractice/skillDetail?data=${encodeURIComponent(JSON.stringify(tempData))}`,
  });
}

const handleOperate = async () => {
  if (props.isReStart) {
    uni.reLaunch({
      url: "/pages/lowPricedCourse/trialCourseHome/trialCourse/index",
    })
  } else {
    if (props.isRelearn) {
      emits("reStart", props.headerTitle);
    } else {
      const temp = uni.getStorageSync("lowCourseMap");
      if (!temp) {
        return util.showDialogue("当前课程不存在");
      }

      const courseMap = new Map(JSON.parse(temp));
      const nextCourse = courseMap.get(Number(store.state.currentDataId)) as any;

      if (!nextCourse || nextCourse?.next_lesson_data_id === -1) {
        return util.showDialogue("当前课程不存在");
      }

      store.dispatch("setCurrentDataId", nextCourse.next_lesson_data_id);

      if (nextCourse.day_num == 1) {
        uni.reLaunch({
          url: `/pages/lowPricedCourse/trialCourseHome/transitionPage/index?courseStep=${4}&isSynthesis=${false}&section_id=${nextCourse?.next_lesson_data_id}}&day_num=${nextCourse.day_num}`,
        });
      } else if (nextCourse.day_num == 3) {
        uni.reLaunch({
          url: `/pages/lowPricedCourse/trialCourseHome/transitionPage/index?courseStep=${3}&isSynthesis=${false}&section_id=${nextCourse?.next_lesson_data_id}}&day_num=${nextCourse.day_num}`,
        });
      }
    }
  }
}

watch(() => props.result, (val) => {
  if (val) {
    handleSetTimeLong(Number(val.time_long));
  }
}, {
  deep: true,
  immediate: true,
})
</script>

<style scoped lang="scss">
.result-container {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  .result-wrapper {
    position: relative;
    width: 35.42rem;
    height: 23.2rem;
    margin: 1.8rem auto 2rem;
    border-image-slice: 27 27 27 27;
    border-image-width: 2rem 2rem 2rem 2rem;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-style: solid;
    border-image-source: url("https://rwstatic.tentons.cn/web/Lesson/images/sentence-result-wrapper.png");

    .wrapper-score {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 8rem;
      height: 8rem;
      margin: 3.5rem auto 2.2rem;
      font-size: 3.5rem;
      font-family: baloo;
      color: #ffffff;
      background-image: url("https://rwstatic.tentons.cn/web/Lesson/images/score-wrapper.png");
      background-size: contain;
      background-repeat: no-repeat;
    }

    .wrapper-row {
      display: flex;
      justify-content: space-between;
      height: 7.4rem;
      padding: 0 1.2rem;

      .col-content {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 10rem;
        height: 7.4rem;
        background-image: url("https://rwstatic.tentons.cn/web/Lesson/images/sentence-col.png");
        background-size: contain;
        background-repeat: no-repeat;

        .col-rich {
          display: inline-block;
          margin-bottom: 0.5rem;
          margin-top: 1.5rem;
          color: $uni-text-color;
          line-height: 1;
        }

        .col-value {
          display: flex;
          align-items: center;
          line-height: 1;
          margin-bottom: 0.5rem;
          margin-top: 1.5rem;
          color: $uni-text-color;

          .value {
            font-family: baloo;
            font-size: 2.4rem;
          }

          .desc {
            font-family: xiaolai;
            font-size: 1.4rem;
          }
        }

        .col-label {
          font-family: xiaolai;
          font-size: 1.4rem;
          color: $uni-text-color-minor;
        }
      }
    }

    .tag {
      position: absolute;
      width: 8.2rem;
      height: 8.2rem;
      top: -2.6rem;
      left: 7rem;
      background-image: url("https://rwstatic.tentons.cn/web/Lesson/images/sentence-tag.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }

  .result-title {
    width: 6.5rem;
    height: 1.9rem;
    margin-left: 2.2rem;
    margin-bottom: 1rem;
    font-family: xiaolai;
    font-size: 1.5rem;
    color: $uni-text-color;
    background-image: url("https://rwstatic.tentons.cn/web/Lesson/images/sentence-text.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .result-overview {
    position: relative;
    width: 33.5rem;
    margin-bottom: 2rem;
    margin-left: 50%;
    transform: translateX((-50%));
    border-radius: 1rem;
    border: 1.5px solid #D8AB61;
    background-color: #FFFFFF;

    .overview-pink-icon {
      position: absolute;
      top: -1.5rem;
      right: 0.1rem;
      width: 3rem;
      height: 3rem;
      z-index: 1;
    }

    .overview-title {
      display: flex;
      justify-content: center;
      padding-left: 3rem;
      padding-right: 3rem;
      margin-top: 1.6rem;
      margin-bottom: 1.2rem;

      .title {
        position: relative;
        display: inline-flex;
        justify-content: center;
        font-family: xiaolai;
        font-size: 1.5rem;
        color: $uni-text-color;
        z-index: 1;

        &::after {
          content: '';
          position: absolute;
          left: -0.6rem;
          right: -0.6rem;
          bottom: 0;
          height: 1rem;
          border-radius: 0.6rem;
          background-color: $uni-btn-minor;
          z-index: -1;
        }
      }
    }

    .overall-wrapper {
      position: relative;

      .wrapper-table {
        padding: 0 2.6rem;

        .table-header {
          display: flex;
          justify-content: space-between;
          width: 100%;
          height: 3.4rem;
          border-bottom: 1px solid #faefde;

          .header {
            display: flex;
            justify-content: center;
            width: 4rem;
            line-height: 2.4rem;
            font-family: xiaolai;
            font-size: 1.4rem;
            color: $uni-text-color;
          }
        }

        .table-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 2.7rem;
          margin-top: 1.1rem;
          margin-bottom: 1.6rem;

          .col {
            width: 4rem;
            display: flex;
            justify-content: center;

            .index {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 1.8rem;
              height: 1.8rem;
              border-radius: 50%;
              font-family: xiaolai;
              font-size: 1.4rem;
              color: $uni-text-color;
              background-color: #ffebca;
            }

            .score {
              font-family: baloo;
              font-size: 1.8rem;
              color: #bf893d;
            }

            .speaker {
              width: 3.1rem;
              height: 3.1rem;
              z-index: 2;
            }

            .detail {
              width: 1.8rem;
              height: 1.8rem;
              z-index: 1;
            }
          }
        }
      }

      .wrapper-status {
        display: flex;
        justify-content: center;
        width: 27.6rem;
        height: 1.6rem;
        margin: 1.2rem auto 2rem;
      }

      .wrapper-tag {
        position: absolute;
        width: 8.2rem;
        height: 8.2rem;
        top: -2.5rem;
        left: 6.5rem;
        background-image: url("https://rwstatic.tentons.cn/web/Lesson/images/sentence-tag.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 1rem;
      border: 0.5rem solid #F9F4E0;
    }
  }

  .result-line {
    height: 10rem;
  }

  .result-operate {
    position: absolute;
    bottom: 2.5rem;
    left: 3rem;
    right: 3rem;
    margin: 0;
    font-family: xiaolai;
    font-size: 1.7rem;
    border-radius: 1rem;
    color: $uni-text-color;
    border: 2px solid $uni-btn-border;
    background-color: $uni-btn-prime;

    .video-button-right {
      width: 1.2rem;
      height: 1.2rem;
    }
  }

  .is-hover {
    color: rgba(255, 255, 255, 0.6);
  }
}
</style>

<style lang="scss">
.rich-text_skill-value {
  font-family: baloo;
  font-size: 2.4rem;
  color: $uni-text-color;
}

.rich-text_skill-label {
  font-family: xiaolai;
  font-size: 1.4rem;
  color: $uni-text-color-minor;
}
</style>